<template>
  <div class="md-show" v-html="renderedContent"></div>
</template>

<script>
export default {
  name: 'MdShow',
  props: {
    /**
     * Markdown内容
     */
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    /**
     * 渲染后的HTML内容
     */
    renderedContent() {
      return this.parseMarkdown(this.value || '');
    }
  },
  methods: {
    /**
     * 解析Markdown为HTML
     * @param {string} markdown - Markdown文本
     * @returns {string} HTML字符串
     */
    parseMarkdown(markdown) {
      if (!markdown) return '';
      
      let html = markdown
        // 处理标题
        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
        
        // 处理粗体
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/__(.*?)__/g, '<strong>$1</strong>')
        
        // 处理斜体
        .replace(/\*(.*?)\*/g, '<em>$1</em>')
        .replace(/_(.*?)_/g, '<em>$1</em>')
        
        // 处理行内代码
        .replace(/`([^`]+)`/g, '<code>$1</code>')
        
        // 处理代码块
        .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
        
        // 处理链接
        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
        
        // 处理图片
        .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" style="max-width: 100%; height: auto;" />')
        
        // 处理无序列表
        .replace(/^\* (.+)$/gm, '<li>$1</li>')
        .replace(/^- (.+)$/gm, '<li>$1</li>')
        
        // 处理有序列表
        .replace(/^\d+\. (.+)$/gm, '<li>$1</li>')
        
        // 处理引用
        .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
        
        // 处理分割线
        .replace(/^---$/gm, '<hr>')
        .replace(/^\*\*\*$/gm, '<hr>')
        
        // 处理换行
        .replace(/\n/g, '<br>');
      
      // 包装列表项
      html = html.replace(/(<li>.*<\/li>)/gs, (match) => {
        return `<ul>${match}</ul>`;
      });
      
      return html;
    }
  }
};
</script>

<style scoped>
.md-show {
  line-height: 1.6;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 标题样式 */
.md-show >>> h1 {
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.3em;
}

.md-show >>> h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.83em 0;
  color: #34495e;
  border-bottom: 1px solid #bdc3c7;
  padding-bottom: 0.3em;
}

.md-show >>> h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
  color: #34495e;
}

/* 段落样式 */
.md-show >>> p {
  margin: 1em 0;
}

/* 强调样式 */
.md-show >>> strong {
  font-weight: bold;
  color: #2c3e50;
}

.md-show >>> em {
  font-style: italic;
  color: #7f8c8d;
}

/* 代码样式 */
.md-show >>> code {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 3px;
  padding: 2px 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  color: #e74c3c;
}

.md-show >>> pre {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}

.md-show >>> pre code {
  background: none;
  border: none;
  padding: 0;
  color: #2c3e50;
  font-size: 0.9em;
}

/* 链接样式 */
.md-show >>> a {
  color: #3498db;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.3s;
}

.md-show >>> a:hover {
  border-bottom-color: #3498db;
}

/* 列表样式 */
.md-show >>> ul {
  margin: 1em 0;
  padding-left: 2em;
}

.md-show >>> li {
  margin: 0.5em 0;
  list-style-type: disc;
}

/* 引用样式 */
.md-show >>> blockquote {
  border-left: 4px solid #3498db;
  margin: 1em 0;
  padding: 0.5em 1em;
  background-color: #f8f9fa;
  color: #7f8c8d;
  font-style: italic;
}

/* 分割线样式 */
.md-show >>> hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, #3498db, #2ecc71, #3498db);
  margin: 2em 0;
}

/* 图片样式 */
.md-show >>> img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 1em 0;
}

/* 表格样式（如果需要） */
.md-show >>> table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

.md-show >>> th,
.md-show >>> td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.md-show >>> th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .md-show {
    font-size: 14px;
  }
  
  .md-show >>> h1 {
    font-size: 1.8em;
  }
  
  .md-show >>> h2 {
    font-size: 1.4em;
  }
  
  .md-show >>> h3 {
    font-size: 1.2em;
  }
}
</style>